<%--
  Created by IntelliJ IDEA.
  User: yzgsj
  Date: 2019/5/21
  Time: 8:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>

    <script type="text/javascript" src="${pageContext.request.contextPath}/plugins/jquery/dist/jquery.js"></script>
</head>
<script>
    <%--form表单转换成json--%>

    function getFormJson(frm) {  //frm：form表单的id
        var o = {};
        var a = $("#" + frm).serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    }

    //获取后台数据填充select
    function getGroup() {

        $.ajax({
            type: "GET",
            url: "${pageContext.request.contextPath}/group",
            contentType: 'application/json; charset=utf-8',
            success: function (m) {
                var options = '';
                for (var i = 0; i < m.data.length; i++) {
                    options += '<option value="' + m.data[i].id + '">' + m.data[i].name + '</option>';
                }
                $("#group").html(options);
            }
        });
    }

    function getClassify() {
        $.ajax({
            type: "GET",
            url: "${pageContext.request.contextPath}/classify",
            contentType: 'application/json; charset=utf-8',
            success: function (m) {
                var options = '';
                for (var i = 0; i < m.data.length; i++) {
                    options += '<option value="' + m.data[i].id + '">' + m.data[i].name + '</option>';
                }
                $("#classify").html(options);
            }
        });

    }

    $(document).ready(function () {

        //加载下拉框
        getClassify();
        getGroup();


        //添加课程提交
        $("#submit_course").click(function () {
            //表单验证省略
            //填充隐藏域
            var classifyPinyin = $('#classify option:selected').html();
            $("#classify_pinyin").val(classifyPinyin);
            //提交表单
            $("#addCourseFrom").submit();
        });

        //轮播图的添加
        $("#addCarousel").click(function () {
            $("#addCarouselFrom").submit();
        });

    });
</script>
<body>

<hr>
<h3>课程的添加</h3>
<div>
    <form id="addCourseFrom" action="${pageContext.request.contextPath}/course/create" method="post" enctype="multipart/form-data">
        <label>
            教学方id
            <input type="text" name="teacherId">
        </label>
        <br>
        <label>
            课程名称
            <input type="text" name="name">
        </label>
        <br>
        <label>
            难度等级
            <select name="level">
                <option value="1">初级</option>
                <option value="2">中级</option>
                <option value="3">高级</option>

            </select>
        </label>
        <br>
        <label>
            课程总小时数
            <input type="text" name="hours">
        </label>
        <br>
        <label>
            课程分钟数
            <input type="text" name="minutes">
        </label>
        <br>
        <label>
            课程介绍
            <input type="text" name="introduction">
        </label>
        <br>
        <label>
            使用人群介绍
            <input type="text" name="crowd">
        </label>
        <br>
        <label>
            课程类别
            <select id="classify" name="classifyId">
                <option>请选择</option>
            </select>
            <input id="classify_pinyin" type="hidden" name="classifyPinyin" value="">
        </label>
        <br>
        <label>
            分组
            <select id="group" name="group">
                <option>请选择</option>
            </select>
        </label>
        <br>
        封面图片
        <input type="file" name="file">
        <br>
        <input id="submit_course" type="button" value="提交">
    </form>


</div>
<hr>
<h3>轮播图的添加</h3>
<div>
    <form id="addCarouselFrom" action="${pageContext.request.contextPath}/carousel/add"
          method="post" enctype="multipart/form-data">
        <label>
            权重
            <input type="text" name="weight">
        </label>
        <br>
        封面图片
        <input type="file" name="file">
        <br>
        <input id="addCarousel" type="button" value="提交">
    </form>


</div>

</div>
</body>
</html>
